List Column Actions

Description

Add an easy way to filter data to any app with List Column Actions.

Discussion

Column Actions allow you apply filters to the data in the List. When the List is rendered, the list columns will appear as shown in the image below.

images/columnactions1.gif

Note that each column in the list has an icon. You can turn the icon off for specific columns if you don't want all columns to show the icon.

Adding Column Actions to a List

To turn on Column Actions on for a Columnar Layout, check the Has column actions property.

images/columnactions_enable.gif

If you have turned Column Actions on, you may still want to not show the icon for a particular column. To turn off the icon for a particular column, go to the Layout tab and check the Hide column actions button.

images/hidecolumnactionbutton.jpg

Using Column Actions to Filter Data

When the user clicks on an icon for a particular column, a dropdown is shown. The dropdown shows all of the unique values in the column. For example to find all records with value of Henry in the Firstname column, check Henry in the list and then click the Filter button.

To find all of the records where Firstname is not equal to Henry, click the Not Equals icon before clicking the Filter button.

You can also click the Contains and Does Not Contain icon before clicking the Filter button.

To clear the filter, click the Clear button.

images/columnactions2.jpg

You can type into the input box to filter the list of values shown in the dropdown. In the image below, the dropdown list shows all values that contain the value "am".

images/columnactions3.jpg

If you have selected some, but not all, of the values in the list, the icon for the <Select All> item indicates that a partial selection has been made.

images/columnactions4.jpg

If all items in the dropdown have been selected, the icon for the <Select All> item indicates that all items have been checked.

images/columnactions5.gif

Once a filter has been applied, the icon in the column header is changed to indicate that the data in that column has been filtered.

images/columnactions6.gif

If you specify a filter for multiple columns the criteria for each column are ANDed.

Customizing Column Action Settings

Certain customization options are available for Column Actions. These include:

Position for column action icon

In the case where you have configured a List for right-to-left display you would want the icon for column actions to appear to the left of the column label

Tooltip for icon buttons in the column actions dropdown

You can customize the text for the tooltips shown in the column actions dropdown. You can use language and text dictionary tags in the labels (.e.g. <a5:r>Equals</a5:r>)

images/columnactions100.gif
The icon can be placed on the left or right side of the column

To define column action settings, click the smart field for Column action settings.

images/columnactions101.gif

The following dialog will then appear:

images/columnactions102.gif

For more information about column actions settings, see Column action settings properties.

Methods

The following JavaScript methods are available for working with List Column Actions:

Videos

Column Actions

When you turn on Column Actions for a columnar Layout in a List control, an filter icon is shown in the column header for each column in the List. The column actions provide a very powerful and convenient way for filtering the data in a List.

2020-07-17

See Also